import React, { useState, useEffect } from 'react';
import {
  // BrowserRouter,
  Switch,
  Route,
  Router
} from 'react-router-dom';
import { createBrowserHistory } from 'history';
import routes from './route';
import {check} from './app/utils/const';
import './App.css';

// const Router = BrowserRouter;

const history = createBrowserHistory();
export default function App(props) {
  const { path } = props;
  const gotoIndex = ()=>{
    history.push("/index");
    history.go(0);
  }
  const [state, setState] = useState(localStorage.getItem('username'));
  const [isAdmin, setIsAdmin] = useState(false);

  useEffect(() => {
    if(state === 'admin')
    setIsAdmin(true);
  }, [state])

  const gotoLogin = ()=>{
    if(state){
      localStorage.setItem('username', undefined);
      history.push('/login');
      setState(undefined);
      setIsAdmin(false);
    }
    else {
      history.push('/login');
    }
  }

  const routeJump = (path)=>{
    return ()=>{
      history.push(path);
      history.go(0);
    };
  }

  const gotoReview = ()=>{
    check(routeJump('/review'),routeJump('/login'))
  }

  const gotoCosplay = ()=>{
    check(routeJump('/cosplay'),routeJump('/login'))
  }

  const gotoUsers = ()=>{
    check(routeJump('/users'),routeJump('/login'))
  }

  const gotoCase = ()=>{
    check(routeJump('/case'),routeJump('/login'))
  }

  const gotoQuestion = ()=>{
    check(routeJump('/question'),routeJump('/login'))
  }

  const gotoTest = ()=>{
    check(routeJump('/test'),routeJump('/login'))
  }

  const gotoStudy = ()=>{
    check(routeJump('/study'),routeJump('/login'))
  }


  return (
    <div className='app'>
      <Router history={history} location={path}>
        <nav>
          <div className='navbar'>
            <div className='navname'>宠物医院学习系统</div>
            <div className='navgations'>
            <div className='navitems' onClick={gotoQuestion} style={isAdmin ? {}: {display: 'none'}}>
                题目管理
                </div>
                <div className='navitems' onClick={gotoCase} style={isAdmin ? {}: {display: 'none'}}>
                病例管理
                </div>
                <div className='navitems' onClick={gotoUsers} style={isAdmin ? {}: {display: 'none'}}>
                用户管理
                </div>
              <div className='navitems' onClick={gotoIndex}>
                主页
                </div>
              <div className='navitems' onClick={gotoReview}>
                导览
              <div className='downarrow'></div>
              </div>
              <div className='navitems' onClick={gotoStudy}>
                学习
                <div className='downarrow'></div>
                </div>
                <div className='navitems' onClick={gotoCosplay}>
                扮演
                </div>
              <div className='navitems' onClick={gotoTest}>测试</div>
           
              <div className='navitems' onClick={gotoLogin}>{state ? '注销' : '登陆' }</div>
            </div>
          </div>
        </nav>
        <Switch>
          {routes.map(r => (
            <Route  path={r.path} component={r} exact={r.exact} key={r.path} />
          ))}
        </Switch>
      </Router>
    </div>
  );
}
